<script lang="jsx">
// import { supplierServer } from '@/api'
import CRUD from '@/components/CRUD/index.vue'
import MeterialPrice from './components/MeterialPrice.vue'
import { ref } from 'vue'
const supplierServer = {
  get: async () => Promise.reject('example test'),
  post: async () => Promise.reject('example test'),
  put: async () => Promise.reject('example test'),
  delete: async () => Promise.reject('example test'),
}
export default {
  components: {
    CRUD
  },
  setup() {
    const columns = [
      { label: '编号', prop: 'id' },
      { label: '供应商名称', prop: 'name' },
      { label: '联系人姓名', prop: 'contact' },
      { label: '联系人手机号', prop: 'mobile' },
      { label: '地址', prop: 'address' },
      { label: '添加时间', prop: 'add_time', minWidth: '160px' },
    ]
    const filters = [
      { key: 'search', type: 'input', props: { placeholder: '搜索供应商名称' } },
    ]
    const createForm = [
      { label: '供应商名称', key: 'name', type: 'input', required: true, props: { placeholder: '请输入供应商名称' } },
      { label: '联系人姓名', key: 'contact', type: 'input', props: { placeholder: '请输入联系人姓名' } },
      { label: '联系人手机号', key: 'mobile', type: 'input', props: { placeholder: '请输入联系人手机号' } },
      { label: '地址', key: 'address', type: 'input', props: { placeholder: '请输入地址' } },
    ]

    const visible = ref(false)
    const info = ref(null)
    const onOpenMeterialPrice = (row) => {
      info.value = row
      visible.value = true
    }
    const onClose = () => {
      visible.value = false
    }

    return () => (
      <CRUD
        title="供应商"
        rawKey="supply_id"
        server={supplierServer}
        columns={columns}
        filters={filters}
        createForm={createForm}
        editForm={createForm}
        deleteable
        fixedColWidth="220px"
        v-slots={{
          handler: ({ row }) => (
            <el-button type="primary" link onClick={() => onOpenMeterialPrice(row)}>原料价格配置</el-button>
          ),
          dialog: () => (
            <el-dialog
              modelValue={visible.value}
              title="原料价格配置"
              width="800px"
              onUpdate:modelValue={onClose}
              destroy-on-close
            >
              <MeterialPrice info={info.value} onClose={onClose} />
            </el-dialog>
          )
        }}
      ></CRUD>
    )
  }
}
</script>